{% extends 'base.html' %}

{% block content %}
    <div class="media">
        <img src="{{ avatar }}" class="img-thumbnail img-fluid mr-3" width="120" height="120" alt="头像">
        <div class="media-body">
            <h2 class="mt-0">{{ current_user.username }}</h2>
            <p class="text-secondary">{{ current_user.email }}</p>
            <p>
                <button class="btn btn-outline-secondary btn-sm" type="button" data-toggle="collapse"
                        data-target="#profileInfo" aria-expanded="false" aria-controls="collapseExample">
                    编辑
                </button>
            </p>
        </div>
    </div>
    {#如果用户输入有误则一直显示表单，通过添加'show' class属性来实现#}
    <div class="collapse {% if form.errors %}show{% endif %}" id="profileInfo">
        <hr>
        <form method="POST" enctype="multipart/form-data" novalidate> {#{{ form.hidden_tag() }}#}
            {{ form.csrf_token }}
            <div class="form-group">
                {{ form.username.label(class="form-control-label") }}
                {% if form.username.errors %}
                    {{ form.username(class="is-invalid form-control form-control-lg") }}
                    <div class="invalid-feedback">
                        {% for error in form.username.errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.username(class="form-control form-control-lg") }}
                {% endif %}
            </div>
            <div class="form-group">
                {{ form.email.label(class="form-control-label") }}
                {% if form.email.errors %}
                    {{ form.email(class="is-invalid form-control form-control-lg") }}
                    <div class="invalid-feedback">
                        {% for error in form.email.errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.email(class="form-control form-control-lg") }}
                {% endif %}
            </div>

            <div class="form-group">
                {{ form.avatar.label() }}
                {{ form.avatar(class="form-control-file") }}
                {% if form.avatar.errors %}
                    {% for error in form.avatar.errors %}
                        <span class="text-danger">{{ error }}</span><br>
                    {% endfor %}
                {% endif %}
            </div>

            <div class="form-group">
                {{ form.submit(class="btn btn-outline-primary") }}
            </div>
        </form>
    </div>
{% endblock %}
